<template>
  <div class="pagination">
    <ul class="dock">
      <li @click="prevOrNext(-1)">
        <i class="iconfont icon-fenye-shangyiye"></i>
      </li>
      <li
        v-for="item in pages"
        :key="item"
        @click="changePage(item)"
        :class="{ active: item === curPage }"
      >
        {{ item }}
      </li>
      <li @click="prevOrNext(1)"><i class="iconfont icon-xiayiye"></i></li>
    </ul>
  </div>
</template>

<script>
import { ref, computed, onMounted } from "vue";
export default {
  name: "Pagination",
  props: {
    totalPages: {
      type: Number,
      default: 1,
    },
  },
  setup(props, ctx) {
    const curPage = ref(1);
    const pages = computed(() => {
      const c = curPage.value;
      const t = props.totalPages;
      if (t < 8) {
        return t;
      } else if (c <= 5) {
        return [1, 2, 3, 4, 5, 6, "...", t];
      } else if (c >= t - 4) {
        return [1, "...", t - 5, t - 4, t - 3, t - 2, t - 1, t];
      } else {
        return [1, "...", c - 2, c - 1, c, c + 1, c + 2, "...", t];
      }
    });
    onMounted(() => {
      bindEvent();
    });

    const bindEvent = () => {
      document.querySelector(".dock").addEventListener("mousemove", (e) => {
        let item = e.target;
        if (item.tagName !== "LI") {
          return;
        }
        let itemRect = item.getBoundingClientRect();
        //计算鼠标位置离鼠标悬停元素左边缘的百分比
        let offset = Math.abs(e.clientX - itemRect.left) / itemRect.width;
        let prev = item.previousElementSibling || null;
        let next = item.nextElementSibling || null;
        //放大倍数
        let scale = 0.6;
        resetScale();
        if (prev) {
          prev.style.setProperty("--scale", 1 + scale * Math.abs(offset - 1));
        }
        item.style.setProperty("--scale", 1 + scale);
        if (next) {
          next.style.setProperty("--scale", 1 + scale * offset);
        }
      });
      //离开时需重置缩放为1
      document.querySelector(".dock").addEventListener("mouseleave", (e) => {
        resetScale();
      });
    };
    const resetScale = () => {
      document.querySelectorAll(".dock li").forEach((li) => {
        li.style.setProperty("--scale", 1);
      });
    };
    //点击页码
    const changePage = (newPageNum) => {
      if (newPageNum == curPage.value) return;
      if (typeof newPageNum === "string") return;
      curPage.value = newPageNum;
      ctx.emit("pageChange", newPageNum);
    };
    const prevOrNext = (num) => {
      curPage.value += num;
      if (curPage.value < 1) {
        curPage.value = 1;
      }
      if (curPage.value > props.totalPages) {
        curPage.value = props.totalPages;
      }
      ctx.emit("pageChange", curPage.value);
    };
    return {
      curPage,
      pages,
      changePage,
      prevOrNext,
    };
  },
};
</script>

<style lang="scss" scoped>
.pagination {
  margin-top: 3rem;
  height: 2rem;
  line-height: 2rem;
  ul {
    text-align: center;
    color: rgb(65, 62, 62);
    --scale: 1;
    li {
      display: inline-block;
      font-size: calc(2rem * var(--scale));
      padding: 0.2rem 0.8rem;
      cursor: default;
      position: relative;
      top: calc((2rem * var(--scale)-2rem) / 2 * -1);
      transition: 15ms all ease-out;
      &.active {
        color: rgb(248, 7, 208);
      }
    }
    li:first-child,
    li:last-child {
      i {
        font-size: calc(1.85rem * var(--scale));
      }
    }
  }
}
</style>